<template>
<div class="wrapper">
    <div>
        <div class="record-check-headTitle">
            <span>OA审批信息</span>
            <span style="font-size: 16px;">OA approval information</span>
        </div>
        <el-row style="background: #fff;line-height: 100px; height: 100px;">
            <el-col :span="4"><div class="grid-content bg-purple-light">审批结果：{{reviewStatusList[detailsData.reviewStatus]}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light">审批时间：{{detailsData.reviewTime}}</div></el-col>
        </el-row>
    </div>
    <div>
        <div class="record-check-headTitle">
            <span>申请信息</span>
            <span style="font-size: 16px;">Application form</span>
        </div>
        <el-row class="info-w">
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>申请单号：{{detailsData.applyNo}}</span><br>
                     <span>Doc.#</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>创建者：{{detailsData.applyUser}}</span><br>
                    <span>Creator</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>状态：{{detailsData.status === 1 ? '未提交' : detailsData.status === 2 ? '已提交' : ''}}</span><br>
                    <span>Status</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>购买机构：{{detailsData.organization}}</span><br>
                    <span>Purchase Campus</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="info-w">
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>购买部门：{{detailsData ? detailsData.workGroup: null}}</span><br>
                    <span>Purchase Dept</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>购买类型: {{detailsData.purchaseType}}</span><br>
                    <span>Purchase Type</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>申请理由：{{detailsData.reason}}</span><br>
                    <span>Create Reason</span>
                </div>
            </el-col>
            <el-col :span="4" >
                <div class="grid-content bg-purple-light">
                    <el-checkbox label="补单" :disabled="detailsData && detailsData.makeup === 2 ? true : false"></el-checkbox>
                    <br><span>Supplementary</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <el-checkbox  label="紧急" :disabled="detailsData && detailsData.urgent === 2 ? true : false"></el-checkbox>
                    <br><span>Urgent</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="info-w">
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>交付地点：{{detailsData.deliverySite}}</span><br>
                    <span>PDelivery Address</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>实际送货地址：{{detailsData.address}}</span><br>
                    <span>Actual Address</span>
                </div>
            </el-col>
        </el-row>
        <el-row class="info-w" v-if=" detailsData && detailsData.changeReason">
            <el-col :span="4">
                <div class="grid-content bg-purple-light">
                    <span>更改原因：{{detailsData.changeReason}}</span><br>
                    <span>Change Reason</span>
                </div>
            </el-col>
        </el-row>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                prop="itemNum"
                label="物资编码,Item Code	"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="itemDescription"
                label="物资描述,Item Description	"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="manufacturerCode"
                label="厂商编码,MFR Code"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="brand"
                label="品牌,Item Code	"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="unit"
                label="单位,Unit	"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="quantityBasedOnMoq"
                label="最小订货量,MOQ"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="quantity"
                label="数量,Quantity"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="manufacturer"
                label="制造商,MFR"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="specificationChn"
                label="规格,Specification"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="costCenter"
                label="成本中心,Cost Cente"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="requiredDate"
                label="需求日期,Required Date	"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="erpStatus"
                label="ERP状态,ERP Status"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="prNumber"
                label="待采购物资ERP单号,Request No"
                :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="moveOrderNumber"
                label="库存物资ERP单号,Move Order No"
                :render-header="renderHeader">
            </el-table-column>
        </el-table>
        <div  v-if="pageData.total>0">
            <v-pagination   :pageData="pageData"  @onPageChange="onPageChange" ></v-pagination>
        </div>
    </div>

    <!--全部导出按钮-->
    <div class="btn">
        <el-button type="primary" size="medium" @click="goBack">返回</el-button>

    </div>

</div>

</template>

<script>
import http from "../../../components/axios/fetch";
import { getDetails,applicationMaterialList} from "../../../components/axios/url";
import renderHeader from '../../common/renderHeader.js'; //表头
import vPagination from "../../common/Pagination.vue"; //分页

    export default {
        name: "InforCheck",
        data(){
            return{
                detailsData:[], //申请信息Application form
                tableData:[],
                pageData: {

                },
                reviewStatusList : ['', '审核中', '审核通过', '审核不通过']

            }
        },
        components:{
           vPagination
        },
        activated(){
            const data = {
                applyId:  this.$route.query.applyId
            }
            this.goLookDetails(data);
            this.getDetailsTable(data)
        },
        methods:{
            renderHeader: renderHeader,
            // 查看详情方法
            goLookDetails(data) {

                try{
                    http.post(getDetails,{...data}).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.detailsData = res.data.data.apply;
                            console.log(this.detailsData)
                        }
                    })
                } catch(error){
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            },

            // 申请表格信息
            getDetailsTable(data){
                try{
                    http.post(applicationMaterialList,{...data}).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.tableData = res.data.data.list;
                            this.pageData = res.data.data.page

                        }
                    })
                } catch(error){
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            },

            // 分页
            onPageChange(page) {
                this.page = page;
                const data = {
                    page: page,
                    applyId: this.$route.query.applyId,
                }
                this.getDetailsTable(data);
            },

            // 返回/platform/Record
            goBack(){
                this.$router.push( {path: '/platform/Record'} )
            },
        },


    }
</script>

<style scoped>
    .wrapper{
        background: #fff;
    }

    .record-check-headTitle {
        margin-bottom: 12px;
        border-left: 6px solid #409EFF;
        padding-left: 8px;
    }
    .record-check-headTitle span {
        font-size: 18px;
        color: #409EFF;
    }
    .wrapper>div{
        margin-bottom: 20px;
    }
    .info-w{
        margin-bottom: 20px;
    }
    .info-w span{
        font-size: 14px;
    }
    div.btn{
        text-align: center;
        margin-bottom: 20px;
        cursor: pointer;
    }
</style>
